/**
 * @summary: 统计分析，产品线透视
 * @author: lixinxiang@vv.cn
 */
import React from 'react';
import { Row, Spin, Card, Col } from 'antd';
import { getProductOverviewData } from '@/services/organization';
import { connect } from 'umi';
import { WeekMonthDate } from '@/components/WeekMonthDate';

import { limitDate } from '../utils';

import styles from './index.less';
// import MOCK from './data.json';
import { VersionInfo, VersionDetail, VersionLine } from '../components';

const Overview = () => {
    const [overviewData, setOverviewData] = React.useState({});
    const [productDetail, setProductDetail] = React.useState(0);

    const [spinning, setSpinning] = React.useState(false);

    const [productId] = React.useState(1);
    const [reportType, setReportType] = React.useState(1);
    const [rangeDate, setRangeDate] = React.useState({});

    React.useEffect(() => {
        const { startDate, endDate } = rangeDate;
        const fetchData = async () => {
            setSpinning(true);
            const response = await getProductOverviewData({ productId, reportType, startDate, endDate });
            setSpinning(false);
            if (response.code === 10000) {
                setOverviewData({
                    ...response.data
                });
                const { perspTaskProductVersionVOList = [{}] } = response.data;
                setProductDetail({ ...perspTaskProductVersionVOList[0] });
            }
        };
        fetchData();
    }, [productId, reportType, rangeDate]);

    return (
        <Row className={styles.wrap}>
            <Spin spinning={spinning}>
                <Card style={{ marginBottom: 12 }}>
                    <Row className={styles.topBtn} type="flex">
                        <WeekMonthDate
                            reportType={reportType}
                            onChange={e => {
                                const { reportType: rtype, startDate, endDate } = e;
                                setReportType(rtype);
                                setRangeDate({ startDate, endDate });
                            }}
                            disabledDate={current => limitDate(current, reportType)}
                        />
                    </Row>
                </Card>
                <Card title="GMS产品线概况" style={{ marginBottom: 12 }} className={styles.versionCard}>
                    <VersionInfo data={overviewData} />
                </Card>
                <Card title="版本工作透视">
                    <Row gutter={16} style={{ padding: '48px 0' }}>
                        <Col span={8}>
                            <VersionDetail
                                data={overviewData}
                                detail={productDetail}
                                setProductDetail={setProductDetail}
                            />
                        </Col>
                        <Col span={16}>
                            <VersionLine data={overviewData} detail={productDetail} />
                        </Col>
                    </Row>
                </Card>
            </Spin>
        </Row>
    );
};

export default connect(({ user }) => ({ user: user.currentUser }))(Overview);
